<template>
  <div id="app">
    <transition :name="transitionType">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      transitionType: 'page'
    }
  },
  created(){
    this.$customMsg()
  },
  // 监听路由变化 根据depIndex的值的大小来判断显示那样的动画
  watch:{
    '$route' (to, from){
      this.transitionType = to.meta.depIndex>from.meta.depIndex?'page':'page1'
    }
  },
  methods:{
  }
}
</script>

<style>
html,body,#app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
/* .page-enter,
.page-enter-to,
.page-leave,
.page-leave-to,
.page1-enter,
.page1-enter-to,
.page1-leave,
.page1-leave-to
{
  transform: translate(0);
} */
.page-enter-active,
.page-leave-active,
.page1-enter-active,
.page1-leave-active
{
  will-change: transform;
  transition: all .5s ease;
  position: absolute;
  overflow: hidden;
}
.page-enter,.page1-leave-active{
  transform: translate(100%);
}
.page-leave-active,.page1-enter{
  transform: translate(-100%);
}
</style>
